import { AppListType } from "@/store/interface/global"
import { AddIconsModalType, ContextMenuType, DModalType, EditIconsType, ShowIframeType } from "../interface/main"

//弹窗模板
export const useModal = () => {
    const modalRef = ref<DModalType>()

    const showModal = () => {
        modalRef.value?.show()
    }

    const closeModal = () => {
        modalRef.value?.handleClose()
    }

    return {
        modalRef,
        showModal,
        closeModal
    }
}

//新增弹窗
export const useAddIconsModal = () => {
    const addIconsModalRef = ref<AddIconsModalType>()
    const addIconsModalVisible = ref(true)

    const showModal = () => {
        addIconsModalVisible.value = true
        nextTick(() => addIconsModalRef.value?.show())
    }

    const closeAddIconsModal = () => {
        addIconsModalVisible.value = false
    }

    return {
        addIconsModalRef,
        addIconsModalVisible,
        showModal,
        closeAddIconsModal
    }
}

//右键菜单
export const useContextMenu = () => {
    const contextMenuRef = ref<ContextMenuType>()

    const showContextMenu = (e: MouseEvent) => {
        e.preventDefault()
        contextMenuRef.value?.showAppMainMenu(e)
    }

    const closeContextMenu = () => {
        contextMenuRef.value?.close()
    }

    return {
        contextMenuRef,
        showContextMenu,
        closeContextMenu
    }
}

//编辑弹窗
export const useEditIconModal = () => {
    const editIconsRef = ref<EditIconsType>()

    const showEditIconModal = (app:AppListType) => {
        if(app.type !== 'app'){
            return Message('该组件暂不支持编辑','warning')
        }
        editIconsRef.value?.show(app)
    }

    return {
        editIconsRef,
        showEditIconModal
    }
}

//iframe弹窗
export const useIframeModal = () => {
    const iframeRef = ref<ShowIframeType>()

    const showIframeModal = (url:string) => {
        iframeRef.value?.show(url)
    }

    return {
        iframeRef,
        showIframeModal
    }
}